<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta
			http-equiv="origin-trial"
			content="Atzk/dTch1Tt8qYq/UwLn6aWawymlc3xOKy3xiuwsaj1HBK6eCTBb+EGOnv7LK+oSQ8Fr1l/qykGHhK64mAn+w4AAABjeyJvcmlnaW4iOiJodHRwczovL2hwdWdpcy5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY5MTcxMTk5OSwiaXNTdWJkb21haW4iOnRydWV9"
		/>
		<title>webworkerTask</title>
		<!-- <link rel="stylesheet" href="./index.scss" /> -->
		<style>
			* {
				box-sizing: border-box;
			}

			html {
				background: #692a84;
				background: linear-gradient(316deg, #0e0f2a, #060913);
				height: 100%;
				width: 100%;
			}

			body {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				overflow: hidden;
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}

			#app {
				height: 100%;
				width: 100%;
			}
		</style>
		<!-- <script type="module" src="../dist/index.js"></script> -->
	</head>

	<body>
		<div id="app"></div>
		<script type="module">
			import {
				BoxGeometry,
				Mesh,
				PerspectiveCamera,
				Scene,
				ShaderMaterial,
				Vector3,
				Color,
				OrbitControl,
				AmbientLight
			} from "../../dist/index.js";
			const init = async () => {
				const scene = new Scene({
					container: "app"
				});
				const camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
				camera.position.set(8, 12, 8);
				camera.lookAt(0, 0, 0);
				scene.setCamera(camera);
				const control = new OrbitControl(camera, document.getElementById("app"));
				control.zoomSpeed = 2.0;
				control.maxPolarAngle = Math.PI / 2;

				const boxGeometry = new BoxGeometry(10, 10, 10);
				const boxMaterial = new ShaderMaterial({
					shaderId: "custom",
					uniformBuffers: [
						{
							uid: "custom",
							uniforms: {
								//must set;      auto Fill
								modelMatrix: { type: "mat4x4<f32>", value: null },
								color: { type: "color", value: new Color(0.2, 0.8, 0.6) }
							}
						}
					],
					vert: `
                        struct MaterialUniform {
                            modelMatrix: mat4x4<f32>,
                            color:vec3<f32>,
                        }
                        struct VertexInput {
                            //auto Fill
                            @location(positionLocation) position: vec3<f32>,       
                            @location(normalLocation) normal: vec3<f32>,
                            @location(uvLocation) uv: vec2<f32>,
                        }
                        struct VertexOutput {
                            @builtin(position) position : vec4<f32>,
                            @location(0) fragPosition: vec4<f32>,
                        }
                        struct CameraUniform {
                            projectionMatrix: mat4x4<f32>,
                            viewMatrix: mat4x4<f32>,
                            inverseViewMatrix: mat4x4<f32>,
                            cameraPosition: vec3<f32>,
                        }; 
                        // Guaranteed to be consistent with the ShaderMaterial type
                        @binding(customBinding) @group(0) var<uniform> matUniform : MaterialUniform;
                        @binding(cameraBinding) @group(1) var<uniform> cameraUniform : CameraUniform;
                        @vertex
                        fn main(input:VertexInput) -> VertexOutput {
                            var output : VertexOutput;
                            output.position = cameraUniform.projectionMatrix * cameraUniform.viewMatrix *matUniform.modelMatrix*vec4<f32>(input.position,1.0);
                            output.fragPosition = vec4(input.uv,input.uv.x,1.0);
                            return output;
                        }
                        `,
					frag: `
										struct VertexOutput {
												@builtin(position) position : vec4<f32>,
												@location(0) fragPosition: vec4<f32>,
										}
										struct MaterialUniform {
												modelMatrix: mat4x4<f32>,
												color:vec3<f32>,
										}
										@binding(customBinding) @group(0) var<uniform> matUniform : MaterialUniform;
										@fragment
										fn main(input:VertexOutput) -> @location(0) vec4<f32> {
												return vec4(input.fragPosition.xyz*matUniform.color,1.0);
										}  
                    `
				});
				const boxPrimitive = new Mesh(boxGeometry, boxMaterial);
				scene.add(boxPrimitive);
				function animate() {
					boxPrimitive.rotateX(0.01);
					requestAnimationFrame(animate);
					control.update();
					scene.render();
				}
				animate();
			};
			init();
		</script>
	</body>
</html>
